<template>
    <!-- 组件模板，这里不需要额外的模板，因为 ELMessageBox 是全屏的 -->
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus';

// 定义组件的 props
const props = defineProps({
    message: {
        type: String,
        required: true,
    },
    title: {
        type: String,
        default: '提示',
    },
    confirmButtonText: {
        type: String,
        default: '确定',
    },
    cancelButtonText: {
        type: String,
        default: '取消',
    },
});

// 接收父组件传递的方法
const emit = defineEmits(['cancel', 'confirm']);

// 定义处理用户选择的方法
const handleConfirm = () => {
    emit('confirm');
};

const handleCancel = () => {
    emit('cancel');
};

// 在 setup 函数中显示 MessageBox
const showMessageBox = () => {
    ElMessageBox.confirm(props.message, props.title, {
        confirmButtonText: props.confirmButtonText,
        cancelButtonText: props.cancelButtonText,
        type: 'warning',
    }).then(handleConfirm).catch(handleCancel);
};

// 在组件挂载后显示消息框
// onMounted(() => {
//     showMessageBox();
// });

// 导出组件的 props 和事件
defineExpose({
    showMessageBox, // 如果需要在父组件中调用这个方法，可以将其暴露出去
});
</script>

<style scoped>
/* 如果有需要，可以在这里添加组件的样式 */
</style>